/* 轮播图START */
// 初始数据
const sliderData = [
    {
        url: './images/banner/banner1.jpg'
    },
    {
        url: './images/banner/banner2.jpg'
    },
    {
        url: './images/banner/banner3.jpg'
    },
    {
        url: './images/banner/banner4.jpg'
    }
]

// 函数封装
function render() {
    const img = document.querySelector('.slider-wrapper img')
    img.src = `${sliderData[i].url}`
    /*
    img.style.animationName = 'scaleUp'; // 动画的名称
    img.style.animationDuration = '5s'; // 动画的持续时间
    img.style.animationIterationCount = ' infinite'; // 动画的重复次数
    */


    document.querySelector('.slider-indicator .active').classList.remove('active')
    document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')
}
//右点击
const btn_right = document.querySelector('.slider .next')
const btn_left = document.querySelector('.slider .prev')
let i = 0
btn_right.addEventListener('click', function () {
    i++
    if (i === sliderData.length) {
        i = 0
    }
    render()
})
btn_left.addEventListener('click', function () {
    i--
    if (i < 0) {
        i = sliderData.length - 1
    }
    render()
})

let timer = setInterval(function () {
    btn_right.click()
}, 3000)

const box = document.querySelector('.slider')
box.addEventListener('mouseenter', function () {
    clearInterval(timer)
})
box.addEventListener('mouseleave', function () {
    timer = setInterval(function () {
        btn_right.click()
    }, 3000)
})

const list = document.querySelectorAll('.slider-indicator li')
list.forEach(function (el, k) {
    el.addEventListener('click', function () {
        i = k
        render()
    })
})
/* 轮播图END */


/* 百度地图API START */
var map = new BMapGL.Map("container");          // 创建地图实例 
var point = new BMapGL.Point(115.887062,28.686464);  // 创建点坐标 
map.centerAndZoom(point, 17);  //17为缩放级别  

map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

map.setHeading(64.5);   //设置地图旋转角度
map.setTilt(0);       //设置地图的倾斜角度

// 添加比例尺控件
var scaleCtrl = new BMapGL.ScaleControl();  
map.addControl(scaleCtrl);
// 添加缩放控件
var zoomCtrl = new BMapGL.ZoomControl();  
map.addControl(zoomCtrl);
// 添加城市列表控件
//var cityCtrl = new BMapGL.CityListControl();
//map.addControl(cityCtrl);

//绘制线折线
var polyline = new BMapGL.Polyline([
    new BMapGL.Point(115.886267,28.68524),
    new BMapGL.Point(115.886302,28.686598),
    new BMapGL.Point(115.888081,28.69139),
    new BMapGL.Point(115.888467,28.690725),
    new BMapGL.Point(115.88791,28.687572),
    new BMapGL.Point(115.888234,28.687113),
    new BMapGL.Point(115.889222,28.687145),
    new BMapGL.Point(115.889307,28.686535),
    new BMapGL.Point(115.889307,28.686535),
    new BMapGL.Point(115.889851,28.685252),
    new BMapGL.Point(115.886267,28.68524)
], {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5});
map.addOverlay(polyline);


//向地图中添加标注
var myIcon = new BMapGL.Icon("./images/坐标.png", new BMapGL.Size(36, 36), {   
// 指定定位位置。  
// 当标注显示在地图上时，其所指向的地理位置距离图标左上   
// // 角各偏移10像素和25像素。您可以看到在本例中该位置即是  
// 图标中央下端的尖角位置。   
anchor: new BMapGL.Size(10, 40),   
// 设置图片偏移。  
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您  
// 需要指定大图的偏移位置，此做法与css sprites技术类似。   
imageOffset: new BMapGL.Size(0, 0)   // 设置图片偏移   
});     
// 创建标注对象并添加到地图  
var marker = new BMapGL.Marker(point, {icon: myIcon});   
map.addOverlay(marker); 

//点击图标时响应
marker.addEventListener("click", function(){   
    // alert("您点击了标注");
    //打开新窗口百度地图   
    window.open('https://j.map.baidu.com/3f/z4c', 'myWindow')
});


/* 地图折线动画START */
//折线动画坐标
var path = [{
    'lng': 115.926112,
    'lat': 28.66832
},{
    'lng': 115.917152,
    'lat': 28.67051
},{
    'lng': 115.912,
    'lat': 28.672875
},{
    'lng': 115.90979,
    'lat': 28.678654
},{
    'lng': 115.897986,
    'lat': 28.681982
},{
    'lng': 115.892381,
    'lat': 28.680999
},{
    'lng': 115.887051,
    'lat': 28.686511
}]

var point = [];

for (let i = 0; i < path.length; i++) {
    point.push(new BMapGL.Point(path[i].lng, path[i].lat));
}

var pl = new BMapGL.Polyline(point);
setTimeout('start()', 3000);
function start () {
    trackAni = new BMapGLLib.TrackAnimation(map, pl, {
        overallView: true, // 动画完成后自动调整视野到总览
        tilt: 55,          // 轨迹播放的角度，默认为55
        duration: 20000,   // 动画持续时长，默认为10000，单位ms
        delay: 0        // 动画开始的延迟，默认0，单位ms
    });
}
/* 地图折线动画END */

//操作折线动画
let dt1 = document.querySelector('#dt1')
dt1.addEventListener('click', function () {
    console.log('进行地铁1号线折线动画')
    //启动折线动画
    trackAni.start();
    setTimeout(function() {
        trackAni.cancel();         // 强制停止动画
        map.setTilt(0);       //倾斜角度回正
    }, 20000); // 延迟时间为1000毫秒（1秒）
})
/* 百度地图API END */